<!--房型详情 编辑-->
<template>
  <div v-loading="loading">
    <!-- <Alert type="error">
      <h5>SellOrder.js文件中的扩展SellOrder表的头部信息,你可以在此处定义需要显示的信息,如果需要获取界面的Vue对象属性,参照此扩展组件GridHeaderExtend.vue的说明</h5>
    </Alert> -->
    <!--点击扩展按钮对应的弹出框-->
    <vol-box :model.sync="model" title="房型-编辑" :width="700" :height="430">
      <VolForm ref="myform" :loadKey="loadKey" :formFileds="formFileds" :formRules="formRules" :labelWidth="130"></VolForm>
      <!-- 添加slot槽覆盖footer的按钮，添加新的按钮 -->
      <div slot="footer">
        <Button type="error" @click="getFirstRow" icon="md-checkmark">保存</Button>
        <Button type="success" @click="resetForm" icon="md-refresh">重置</Button>
        <Button type="info" @click="close" icon="md-close">关闭</Button>
      </div>
    </vol-box>
  </div>
</template>
<script>
import bus from '@/utilities/bus.js'
import VolForm from '@/components/basic/VolForm.vue'
export default {
  components: {
    VolBox: () => import('@/components/basic/VolBox.vue'),
    VolForm,
  },
  data() {
    return {
      loading: false,
      loadKey: true,
      model: false,
      formFileds: {
        room_Name: '', //房型名称
        room_Code: '', //房型编码
        pms_Room_Code: '', //pms房型代码
        real_Quantity: '', //实际数量
        elementIdex: '', //索引
      },
      formRules: [
        [
          {
            title: '房型名称',
            field: 'room_Name',
            required: true,
            colSize: 6,
            type: 'text',
          },
          // {
          //   field: "room_Code",
          //   title: "房型编码",
          //   required: true,
          //   colSize: 6,
          //   type: "text",
          // },
        ],
        [
          {
            field: 'pms_Room_Code',
            title: 'pms房型代码',
            colSize: 6,
            type: 'selectList',
            dataKey: 'pms_Room_Code',
            data: [],
          },
          {
            field: 'real_Quantity',
            title: '实际数量',
            required: true,
            colSize: 6,
            type: 'number',
          },
        ],
      ],
    }
  },
  created() {},
  methods: {
    // // 循环动态表单
    getFormOption(field) {
      let option;
      this.formRules.forEach((x) => {
        x.forEach((item) => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    
    // // 给下拉选择器绑定 onChange 事件
    // onInit() {
    //   let orderTypeOption = this.getFormOption("payment_method");
    //   orderTypeOption.onChange = (val) => {
    //     let orderTypeOption = this.getFormOption("payment_method");
    //     orderTypeOption.data.forEach((item) => {
    //       if (item.key == val) {
    //         console.log(item, val);
    //         this.formFileds.account_name = item.accMain.account_name;
    //       }
    //     });
    //   };
    // },
    // 保存按钮
    open(row,v) {
      this.model = true
      console.log('行数据编辑', row,v)
      this.$nextTick(()=>{
      this.formFileds.room_Name = row.room_Name
      this.formFileds.room_Code = row.room_Code
      this.formFileds.pms_Room_Code = row.pms_Room_Code
      this.formFileds.real_Quantity = row.real_Quantity
      this.formFileds.elementIdex = row.elementIdex //索引
      })
         let pms_Room_Code = this.getFormOption("pms_Room_Code");
         pms_Room_Code.data=[]
         this.$set(pms_Room_Code, "data",v);
    },
    // 保存按钮
    getFirstRow() {
      let that = this
      this.$refs.myform.validate(() => {
        that.$parent.jsEvents(this.formFileds)
      })
    },
    close() {
      this.model = false
      //  let that= this.$store.getters.data().viewPageTest;
      //  that.$refs.table.load();
    },
    // 重置表单
    resetForm() {
      this.$refs.myform.reset()
    },
  },
}
</script>
